import React from 'react';
import { Toast, Icon, Picker, Button, InputItem, List, DatePicker, Flex } from 'antd-mobile';
import _ from 'lodash';
import moment from 'moment';
import { fetchVipTypes } from '../../services/vipService';

const Item = List.Item;

class PaidVip extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      cardTypeList: [],
    };
  }

  componentDidMount() {
    const { cardTypeList, shopId } = this.props;
    if (!cardTypeList || !cardTypeList.length) {
      fetchVipTypes(shopId).then((res) => {
        if (_.isArray(res.data) && res.data.length > 0) {
          this.setState({
            cardTypeList: res.data,
          });
        }
      })
    }
  }

  render() {
    const { form, paidVip = {} } = this.props;
    const { paidCardTypes = [] } = paidVip;
    const { getFieldProps, getFieldError } = form;
    const { cardTypeList = [] } = this.state;

    const pickerData = [];
    _.forEach(cardTypeList, (cardType) => {
      const index = _.findIndex(paidCardTypes, (paidCardType) => {
        return _.trim(paidCardType.card_type) == _.trim(cardType.type_id);
      });

      if (index >= 0) {
        pickerData.push({
          label: cardType.type_name,
          value: _.trim(cardType.type_id),
        });
      }
    });

    let fee = 0;
    const selectCardType = form.getFieldValue('paid_card_type');
    if (selectCardType && paidCardTypes.length) {
      _.forEach(paidCardTypes, (cardType) => {
        if (_.trim(cardType.card_type) == _.trim(selectCardType)) {
          fee = cardType.fee;
          return false;
        }
      });
    }

    return (<div className="PaidVip">
      <Picker
        data={pickerData}
        cols={1}
        error={!!getFieldError('paid_card_type')}
        {...getFieldProps('paid_card_type', {
          rules: [{ required: true, message: '请选择会员卡类型' }],
        })}
      >
        <List.Item arrow="horizontal">会员卡类型</List.Item>
      </Picker>
      <Item>
        <Flex justify="end">
          <Flex.Item></Flex.Item>
          <Flex.Item></Flex.Item>
          <Flex.Item>费用总计：{fee}</Flex.Item>
        </Flex>
      </Item>
    </div>);
  }
}

PaidVip.propTypes = {
  shopId: React.PropTypes.string,
  form: React.PropTypes.object,
  cardTypeList: React.PropTypes.array,
  paidVip: React.PropTypes.object,
  onChange: React.PropTypes.func,
};


PaidVip.defaultProps = {
};

export default PaidVip;
